import React, { useCallback,useState,useEffect,useContext} from 'react'
import { ListWrapper } from './styled'
import Navbar from '@/components/Navbar/Navbar'
import left from '@/assets/images/left.png'
import { useHistory, useLocation,useRouteMatch} from 'react-router-dom'
import Search from '@/components/search/Search'
import Showlist from '@/components/showList/ShowList'
import httpContext from '@/context/httpContext'
import _ from 'lodash'
import { Drawer, List, NavBar, Icon } from 'antd-mobile';


export default function List2(props) {
    const history = useHistory()
    const { state } = useLocation()
    const match=useRouteMatch()
    const [active,setActive]=useState('all')
    const [bg,setBg]=useState('')
    const [list,setList]=useState([])
    const {get} =useContext(httpContext)
    const [order,setOrder]=useState(true)
    const [open,setOpen]=useState(false)
    const [result,setResult]=useState(false)
    let str=state?state.keyword:''
   
    useEffect(
        async ()=>{
            let res=await get({
                url:'search.json'
            })
            let list2=res.data.productList
            if(state.keyword){
                setList(  _.filter(list2,function(o){
                    if(_.includes(o.title.toLowerCase(),str.toLowerCase())){
                        setResult(true)
                        return o
                    }
                }))
            }
            if(state.name)
            {
                setList(res.data.productList)
                setResult(true)
            }
           
        },[]
    )
   

    const handleClick = useCallback(
        () => {
            history.goBack()
        }
    )

    const handleSearch = useCallback(
        () => {
            return () => {
                history.push('/search')
            }
        }
    )

    const onOpenChange = useCallback(
        (...args) => {
            console.log(args);
                setOpen(!open)
        
        }
    )


    
   const handleLiClick=useCallback(
      (name)=>{
            return()=>{
                setActive(name)
                switch(name){
                    case 'all':
                        setList(_.orderBy(list,['brandId'],['asc']))
                        break;
                    case 'price':
                        setOrder(!order)
                        if(order){
                            setList(_.orderBy(list,['price'],['asc']))
                        }else{
                            setList(_.orderBy(list,['price'],['desc']))
                            setBg('active')
                        }
                        break;
                    case 'num':
                        setList(_.orderBy(list,['soldNum'],['desc']))
                        break;
                    case 'chose':
                        onOpenChange()
                        break
                    case 'new':
                        setList(_.orderBy(list,['productId'],['desc']))

                    }
            }
      }
   )
  
 let people=['通用','女','男','大童','婴童','中童','儿童']
 let size=[34,34.5,35,36,38,41,42,42.5,43,44,45]
 let brand=['Converse','回力','飞跃/Feiyue','Keds','PONY','Vans','李宁','Kappa','安踏','人本','DIOR','Levis']
  const sidebar = (
    <div className='dialog'>
        <div className='people'>
            <p>
                <span className='peo'>适用人群</span>
                <span className='both'>全部</span>
            </p>
            <div className='man'>
                <ul>
                    {
                        people.map((item,index)=>{
                            return(
                                <li key={index}>{item}</li>
                            )
                        })
                    }
                </ul>
            </div>
        </div>
        <div className='people'>
            <p>
                <span className='peo'>商品尺码</span>
                <span className='both'>全部</span>
            </p>
            <div className='man'>
                <ul>
                {
                size.map((item,index)=>{
                    return(
                        <li key={index}>{item}</li>
                    )
                })
                }
                </ul>
            </div>
        </div>
        <div className='price'>
            <h1>价格区间(元)</h1>
            <input type="text" className='input' placeholder='输入最高价'/>
            <span>———</span>
            <input type="text" className='input' placeholder='输入最低价'/>
        </div>
        <div className='people'>
            <p>
                <span className='peo'>热门品牌</span>
                <span className='both'>全部</span>
            </p>
            <div className='man'>
                <ul>
                {
                brand.map((item,index)=>{
                    return(
                        <li key={index}>{item}</li>
                    )
                })
                }
                </ul>
            </div>
        </div>
        <div className='action'>
            <button className='reset' onClick={onOpenChange}>重置</button>
            <button className='confirm' onClick={onOpenChange}>确认</button>
        </div>
    </div>
    

        );
    return (
        <ListWrapper>
            <Navbar
                title='搜索'
                icon={left}
                color='#F8F8F8'
                onClick={handleClick}
            >
            </Navbar>
           {/* {isShow && <Dialog></Dialog>} */}

            <Search
                borderColor="#eee"
                borderRadius={10}
                outerBg='white'
                innerBg='#F5F5F9'
                title={state?state.name:'搜索'}
                height='.3rem'
                onClick={handleSearch()}
            ></Search>
            <div className='chose'>
             <ul>
                 <li
                 onClick={handleLiClick('all')}
                className={active==='all'?'color':''}
                 >综合</li>
                 <li
                 onClick={handleLiClick('num')}
                className={active==='num'?'color':''}
                 >销量</li>
                 <li 
                 onClick={handleLiClick('price')}
                className={active==='price'?order?'active color':'price color':'none'}
                 >价格</li>
                 <li
                 onClick={handleLiClick('new')}
                className={active==='new'?'color':''}
                 >新品</li>
                 <li 
                 onClick={handleLiClick('chose')}
                 className={active==='chose'?'color choose':'choose'}
                 >筛选</li>
             </ul>
            </div>
            <div className='product'>
                <div className={result?'resActive':'res'}>抱歉，没有找到相关商品</div>
                <Showlist list={list}></Showlist>
            </div>
            <Drawer
            className={'my-drawer'}
            enableDragHandle
            contentStyle={{ color: '#A6A6A6', textAlign: 'center', paddingTop: 42 ,display:'none'}}
            sidebar={sidebar}
            open={open}
            onOpenChange={onOpenChange}
            position='right'
        >
            <></>
        </Drawer>
        </ListWrapper>
    )
}
